let currentOpenClassName = "component-wrap";
import {MyClassFileListener } from './listener.js'
import {createTeacherClassWrap} from './class.js'
// history class listener
let backClassHistory = () => {
    $(".back-class")[0].addEventListener("click", (e) => {
        $(".compone-class-history")[0] && $(".compone-class-history")[0].remove();
        if (currentOpenClassName === "component-wrap") {
            createTeacherClassWrap();
        } else {
            fileClassOpenListener();
            createFileStudentList();
        }
    });
};

// main page listener
let fileClassOpenListener = () => {
    let fileClass = document.createElement("div");
    fileClass.className = "component-wrap-file";
    fileClass.innerHTML = `
        <div class='component-class-file-top'>
            <i class='iconfont icon-xiang-zuo file-back' style='margin-left:13px;cursor:pointer'></i>
            <span style='margin-left:18px'>归档的课程</span>
        </div>
        <div style='padding-left:47px;height:41px;display:flex;align-items:center;color:#D1D1D1;border-bottom:1px solid #F3F3F3'>学生</div>
    `;
    $(".body")[0].appendChild(fileClass);
};

// file-class component create
let createFileStudentList = () => {
    let student = document.createElement('div')
    student.className = 'component-class-file-student'
    let studentList = document.createElement("div");
    let studentList2 = document.createElement("div");
    let studentList3 = document.createElement("div");
    studentList.className = "component-file-student-list";
    studentList.innerHTML = `
        <div class='component-file-student-list-left'>
            <i class='iconfont icon-xiangxia student-xiangxia' style='color:#858585;margin-right:0;transform:rotate(360deg);transition:.4s'></i>
            <img style='margin-left:8px' src='../../../static/anquan.png' width='28' height='28'/>
            <span style='margin-left:15px'>kerri Y.</span>
        </div>
        <div class='component-file-student-list-right'>
            <div style='color:#5686E9;display:flex;align-items:center'>
                <i class='iconfont icon-xinxi'></i>
                <span style='margin-left:4px;cursor:pointer'>信息</span>
            </div>
            <div style='color:#E9B356;display:flex;align-items:center;margin-left:26px;cursor:pointer' class=' openClassHistory'>
                <i class='iconfont icon-jilu1'></i>
                <span style='margin-left:4px;cursor:pointer'>课程记录</span>
            </div>
            <div style='color:#5686E9;display:flex;align-items:center;margin-left:26px;margin-right:42px'>
                <span style='margin-left:4px;cursor:pointer'>解档</span>
            </div>
        </div>
    `;
    studentList2.className = "component-file-student-list2";
    studentList3.className = "component-file-student-list3";
    studentList3.innerHTML = `
        <div class='component-file-student-list2-top'>
            <div>日期</div>
            <div>状态</div>
            <div>时长</div>
            <div>收入</div>
            <div></div>
        </div>
        <div style='background-color:#DBE7FF;height:22px;display:flex;align-items:center;padding-left:47px'>已完成</div>
    `;
    student.appendChild(studentList);
    studentList2.appendChild(studentList3);
    studentList2.appendChild(createFileStudentComplete());
    student.appendChild(studentList2);
    $('.component-wrap-file')[0].appendChild(student)
    MyClassFileListener();
};

// file-class component student list
let createFileStudentComplete = () => {
    let listUl = document.createElement("div");
    listUl.className = "component-class-complete-list-ul";
    listUl.innerHTML = `
        <div class='component-class-complete-list'>
            <div>10月13日星期五</div>
            <div>15:00</div>
            <div>50分钟</div>
            <div>$20.00</div>
            <div></div>
        </div>
        <div class='component-class-complete-list'>
            <div>10月13日星期五</div>
            <div>15:00</div>
            <div>50分钟</div>
            <div>$20.00</div>
            <div></div>
        </div>
        <div class='component-class-complete-list'>
            <div>10月13日星期五</div>
            <div>15:00</div>
            <div>50分钟</div>
            <div>$20.00</div>
            <div></div>
        </div>
    `;
    return listUl;
};

export {
    backClassHistory,
    fileClassOpenListener,
    createFileStudentList
}